<link href="/classico/public/assets/front-end/css/index/index.css"
      rel="stylesheet" type="text/css"/>
<div class="system-messages">
    <ul>
        <?php
        $messages = $this->messages;
        foreach ($messages as $message) :
            ?>
            <li><?= $message ?></li>
        <?php
        endforeach
        ?>
    </ul>
</div>
<div class="user-search-n-filter">
    <div class="user-search">
        <label><input type="text" value="<?= $this->enteredKeyWords ?>"/></label>
        <input type="button" value=""/>
    </div>
    <div class="user-hyperlink-btn">
        <a href="/classico/public/index/index">Refresh</a>
    </div>
    <div class="user-filter">
        <label>
            <select>
                <option value="0">-- Product Type --</option>
                <?php
                /** @var ProductTypePOJO[] $productTypePOJOs */
                $productTypePOJOs = $this->productTypePOJOs;
                foreach ($productTypePOJOs as $productTypePOJO) :
                    if ($this->selectedProductTypeID &&
                        $productTypePOJO->ID == $this->selectedProductTypeID
                    ) :
                        ?>
                        <option value="<?= $productTypePOJO->ID ?>"
                                selected="selected">
                            <?= $productTypePOJO->Name ?>
                        </option>
                    <?php
                    endif;
                    if (!$this->selectedProductTypeID ||
                        $productTypePOJO->ID != $this->selectedProductTypeID
                    ) :
                        ?>
                        <option value="<?= $productTypePOJO->ID ?>">
                            <?= $productTypePOJO->Name ?>
                        </option>
                    <?php
                    endif;
                endforeach
                ?>
            </select>
        </label>
    </div>
</div>
<div id="banner-advertise">
    <img src="/classico/public/assets/trivial/banner.png"/>
</div>
<?= $this->paginationControl($this->paginator, 'Sliding', 'my_pagination_control.phtml') ?>
<div id="product-list">
    <?php
    $products = $this->products;
    foreach ($products as $product) :
        ?>
        <div class="product">
            <img class="product-image" src="<?= $product['ImageURL'] ?>"/>

            <div class="product-name">
                <a href="/classico/public/index/detail/productID/<?= $product['ID'] ?>">
                    <span><?= $product['Name'] ?></span>
                </a>
            </div>
            <div class="product-detail">
                <div class="product-detail-left">
                    <div class="product-oprice">
                        <?= $product['NewPrice'] ?> đ
                    </div>
                    Giá gốc:
                    <span class="product-nprice">
                        <?= $product['OldPrice'] ?> đ
                    </span>

                    <div class="bought-amount">
                        Đã mua: <?= $product['OrginalAmount'] - $product['ExistingAmount'] ?>
                    </div>
                </div>
                <div class="product-detail-right">
                    <a href="/classico/public/index/detail/productID/<?= $product['ID'] ?>">
                        <div class="btn-view-product"></div>
                    </a>
                </div>
            </div>
        </div>
    <?php
    endforeach
    ?>
</div>
<?= $this->paginationControl($this->paginator, 'Sliding', 'my_pagination_control.phtml') ?>
<script type="text/javascript">
    function forwardHyperlink() {
        var currentURL = window.location.href;

        var forwardURL = currentURL.replace(/\/index\/[\w\W]*/, '');
        forwardURL = forwardURL.replace(/\/index\/[\w\W]*/, '');
        forwardURL = forwardURL.replace(/\/keyWords\/[\w\W]*/, '');
        forwardURL = forwardURL.replace(/\/productTypeID\/[\w\W]*/, '');
        forwardURL = forwardURL.replace(/\/page\/[\w\W]*/, '');

        forwardURL += '/index/index';

        var keyWords = $('.user-search input[type = "text"]').val();
        if (keyWords != '') {
            forwardURL += '/keyWords/' + keyWords;
        }

        var productTypeID = $('.user-filter select').val();
        if (productTypeID != 0) {
            forwardURL += '/productTypeID/' + productTypeID;
        }

        window.location.href = forwardURL;
    }

    $('.user-search input[type = "text"]').keydown(function (event) {
        if (event.which == 13) {
            forwardHyperlink();
        }
    });

    $('.user-search input[type = "button"]').click(function () {
        forwardHyperlink();
    });

    $('.user-filter select').change(function () {
        forwardHyperlink();
    });
</script>